var charactersList = [
    {
        elem: "雷属性",
        characters: [
            {name: "北斗", roles: ["剧变输出"]},
            {name: "刻晴", roles: ["剧变输出"]},
            {name: "菲谢尔", roles: ["剧变输出"]},
            {name: "丽莎", roles: ["剧变输出","功能辅助"]},
            {name: "雷泽", roles: ["剧变输出"]}
        ]
    },
    //风
    {
        elem: "风属性",
        characters: [
            {name: "琴", roles: ["剧变输出","攻击治疗"]},
            {name: "温迪", roles: ["剧变输出"]},
            {name: "魈", roles: ["剧变输出"]},
            {name: "万叶", roles: ["精通核心"]},
            {name: "砂糖", roles: ["精通核心"]},
            {name: "风主", roles: ["剧变输出"]}
        ]
    },
    //水
    {
        elem: "水属性",
        characters: [
            {name: "莫娜", roles: ["增幅输出"]},
            {name: "公子", roles: ["增幅输出"]},
            {name: "行秋", roles: ["增幅输出"]},
            {name: "芭芭拉", roles: ["生命治疗"]}
        ]
    },
    //火
    {
        elem: "火属性",
        characters: [
            {name: "胡桃", roles: ["生命核心"]},
            {name: "可莉", roles: ["增幅输出"]},
            {name: "迪卢克", roles: ["增幅输出"]},
            {name: "烟绯", roles: ["增幅输出"]},
            {name: "安柏", roles: ["增幅输出"]},
            {name: "香菱", roles: ["增幅输出"]},
            {name: "辛焱", roles: ["防御核心", "功能辅助"]},
            {name: "班尼特", roles: ["生命治疗"]}
        ]
    },
    //冰
    {
        elem: "冰属性",
        characters: [
            {name: "甘雨", roles: ["剧变输出"]},
            {name: "优菈", roles: ["剧变输出"]},
            {name: "七七", roles: ["攻击治疗"]},
            {name: "迪奥娜", roles: ["生命治疗"]},
            {name: "重云", roles: ["功能辅助", "增幅输出"]},
            {name: "罗莎莉亚", roles: ["功能辅助", "增幅输出"]},
            {name: "凯亚", roles: ["增幅输出"]}
        ]
    },
    //岩
    {
        elem: "岩属性",
        characters: [
            {name: "钟离", roles: ["生命核心"]},
            {name: "阿贝多", roles: ["防御核心"]},
            {name: "凝光", roles: ["剧变输出"]},
            {name: "诺艾尔", roles: ["防御核心"]},
            {name: "岩主", roles: ["剧变输出"]}
        ]
    }
]

//遍历，生成下拉角色选项
for (let i = 0; i < charactersList.length; i++) {
    //属性
    let optionElem = document.createElement("option");
    optionElem.setAttribute("class", "elem");
    optionElem.disabled = true;
    optionElem.value = charactersList[i].elem;
    optionElem.innerHTML = charactersList[i].elem;
    document.getElementById("characters").appendChild(optionElem);  
    //角色
    for(let j = 0; j < charactersList[i].characters.length; j++){
        let optionName = document.createElement("option");
        optionName.value = charactersList[i].characters[j].name;
        optionName.innerHTML = charactersList[i].characters[j].name;
        document.getElementById("characters").appendChild(optionName);  
    }
}

//onchange，当选择角色时，展示其对应的定位
function showRoles(name){
    for (let i = 0; i < charactersList.length; i++) {
        for(let j = 0; j < charactersList[i].characters.length; j++){
            if(charactersList[i].characters[j].name == name){
                let html = "角色定位:"
                for(let k = 0; k < charactersList[i].characters[j].roles.length; k++){
                    html += `<span style="color: red;margin-left: 10px;">` + charactersList[i].characters[j].roles[k];
                    if(k != charactersList[i].characters[j].roles.length - 1){
                        html += ",";
                    }
                }
                html += `</span>`;
                document.getElementById("roles").innerHTML = html;
            }
        }
    }
}

